<script setup lang="ts">
import CirclePacking from '@/components/CirclePacking/CirclePacking.vue'

const data = [
  {
    name: 'Drama',
    value: 1046790,
  },
  {
    name: 'Comedy',
    value: 1039358,
  },
  {
    name: 'Documentary',
    value: 461880,
  },
  {
    name: 'News',
    value: 308136,
  },
  {
    name: 'Talk-Show',
    value: 270578,
  },
  {
    name: 'Action',
    value: 226334,
  },
  {
    name: 'Animation',
    value: 197342,
  },
  {
    name: 'Reality-TV',
    value: 189739,
  },
  {
    name: 'Crime',
    value: 175272,
  },
  {
    name: 'Family',
    value: 150621,
  },
  {
    name: 'Short',
    value: 138255,
  },
  {
    name: 'Adventure',
    value: 121216,
  },
  {
    name: 'Game-Show',
    value: 119912,
  },
  {
    name: 'Music',
    value: 102488,
  },
  {
    name: 'Adult',
    value: 90157,
  },
  {
    name: 'Biography',
    value: 59307,
  },
  {
    name: 'Sport',
    value: 58999,
  },
  {
    name: 'Romance',
    value: 52776,
  },
  {
    name: 'Horror',
    value: 50800,
  },
  {
    name: 'Fantasy',
    value: 22614,
  },
  {
    name: 'Sci-Fi',
    value: 22026,
  },
  {
    name: 'Thriller',
    value: 19706,
  },
  {
    name: 'Mystery',
    value: 18274,
  },
  {
    name: 'History',
    value: 16108,
  },
  {
    name: 'Western',
    value: 12535,
  },
  {
    name: 'Musical',
    value: 12240,
  },
  {
    name: 'War',
    value: 1992,
  },
  {
    name: 'Film-Noir',
    value: 36,
  },
]
</script>

<template>
  <div
    style="
      width: 100%;
      height: 100%;
      background-color: darkgray;
      display: flex;
      align-items: center;
      justify-content: center;
    "
  >
    <div style="width: 500px; height: 300px; background-color: white">
      <CirclePacking animate :data="data">
        <template #default="{ item }">
          <div
            style="width: 100%; height: 100%; background-color: dodgerblue; border-radius: 50%"
          ></div>
        </template>
      </CirclePacking>
    </div>
  </div>
</template>
